<template>
  <view class="h-10 leading-10 pl-1">
    <uni-icons @click="back" type="left" size="26"></uni-icons>
  </view>

  <view class="content">
    <view class="list">
      <block v-for="(item, index) in list" :key="index">
        <view v-if="item.f" class="item-f">
          <image src="../../static/cats/miemie.jpg" mode="aspectFill"></image>
          <view>{{ item.text + (index === list.length - 1 ? textLoader : '') }}</view>
        </view>
        <view v-else class="item-r">
          <view>{{ item.text }}</view>
          <image src="../../static/cats/pipimao.jpg" mode="aspectFill"></image>
        </view>
      </block>
    </view>
    <view class="input">
      <textarea v-model="text" :disabled="inputDisabled" fixed auto-height></textarea>

      <view class="" @click="submit">发送</view>

      <!-- <view class="">清空</view> -->
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useHttp } from '@/request/request'
  import { ref } from 'vue'

  const { get, post } = useHttp()

  const textLoader = ref('')
  const text = ref('')
  const inputDisabled = ref(false)
  const list = ref([
    {
      f: true,
      text: '说点什么吧~',
    },
  ])

  const submit = async () => {
    inputDisabled.value = true
    const obj = {
      f: false,
      text: text.value,
    }

    text.value = ''

    const obj2 = {
      f: true,
      text: '',
    }
    list.value.push(obj, obj2)
    const timeSet = loaderText()

    const res = await testData()

    list.value[list.value.length - 1].text = res.content
    console.log('res', res)

    inputDisabled.value = false
    textLoader.value = ''
    clearInterval(timeSet)
  }

  const testData = () => {
    return new Promise<{ content: string }>((resolve, reject) => {
      setTimeout(() => {
        resolve({
          content: '我个猫咪哪知道啊',
        })
      }, 3000)
    })
  }

  const loaderText = () => {
    const point = setInterval(() => {
      if (textLoader.value == '......') {
        textLoader.value = ''
      }
      textLoader.value = textLoader.value + '.'
      console.log(textLoader.value)
    }, 500)
    return point
  }

  const back = () => {
    console.log('aaaa')

    uni.navigateBack({
      delta: 1,
    })
  }
</script>

<style lang="scss" scoped>
  .list {
    width: 710rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item-f {
      display: flex;
      margin-bottom: 20rpx;
      image {
        height: 88rpx;
        width: 88rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      view {
        background-color: #fff;
        padding: 10rpx 20rpx;
        font-size: 34rpx;
        color: #333;
        border-radius: 12rpx;
        line-height: 68rpx;
        word-wrap: break-word;
        max-width: 450rpx;
      }
    }
    .item-r {
      display: flex;
      justify-content: flex-end;
      margin-left: 108rpx;
      margin-bottom: 20rpx;
      image {
        height: 88rpx;
        width: 88rpx;
        border-radius: 8rpx;
        margin-left: 20rpx;
      }
      view {
        background-color: #95ec69;
        padding: 10rpx 20rpx;
        font-size: 34rpx;
        color: #333;
        border-radius: 12rpx;
        line-height: 68rpx;
        max-width: 455rpx;
        word-wrap: break-word;
      }
    }
  }
  .input {
    background-color: #f6f6f6;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 50rpx;
    display: flex;
    align-items: center;
    border-top: 2rpx solid #ececec;
    padding-top: 20rpx;
    textarea {
      width: 450rpx;
      background-color: #fefefe;
      font-size: 28rpx;
      color: #666;
      padding: 20rpx 10rpx;
      border-radius: 12rpx;
      margin: 0 40rpx;
    }
    view {
      background-color: #e9e9e9;
      font-size: 32rpx;
      font-weight: bold;
      padding: 14rpx 60rpx;
      color: #07c160;
      border-radius: 12rpx;
      white-space: nowrap;
    }

    view:active {
      background-color: #d2d2d2;
    }
  }
</style>
<style>
  page {
    background-color: #ededed;
  }
</style>
